<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>Java</li>
        <li>JavaScript</li>
        <li>Python</li>
        <li>Swift</li>
    </ul>
    <script>
        const oList = document.querySelector('ul')
        console.log(oList.parentNode)
        console.log(oList.parentElement)
        // 得到 oList 元素的子节点
        console.log(oList.childNodes)
        console.log(oList.children)
        //访问第一个元素
        console.log(oList.firstChild)
        console.log(oList.firstElementChild)
        //访问最后一个元素
        console.log(oList.lastElementChild)
        // 访问相邻的元素
        console.log(oList.firstElementChild.nextElementSibling)
        console.log(oList.lastElementChild.previousElementSibling)
        // 元素节点的数目
        console.log(oList.childNodes.length)
        console.log(oList.childElementCount)
    </script>
</body>

</html>